<template>
    <div class="login-form">
        <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="userAccount"
            name="userAccount"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" style="margin-bottom: 10px;">
            登录
            </van-button>
            <a style="color: #1989fa;" href="/regin" >去注册</a>
        </div>
        </van-form>
    </div>
</template>

<style scoped>
#login-form {
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使容器高度占满整个视口 */
    width: 100%;
}

#login-form .van-form {
    padding: 10px 10px;
    width: 100%; /* 使表单宽度占满容器 */
    max-width: 400px; /* 设置最大宽度，防止表单过宽 */
}
</style>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showFailToast, showSuccessToast } from 'vant';
import Myaxios from '../plugins/MyAxios';

const router = useRouter();
const userAccount = ref('');
const password = ref('');

const onSubmit = async () => {
    const res = await Myaxios.post('/login', {
        userAccount: userAccount.value,
        userPassword: password.value
    });
    if (res.data.code === 200) {
        showSuccessToast("登陆成功！");
        router.push({
            path: '/index',
        });
    } else {
        showFailToast("账号或密码错误！");
    }
};
</script>
